// 要引入才能输出路径
const path = require('path')
//引入html插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/main.js', //打包的入口
    output: {
        path: path.resolve(__dirname, 'dist'), //输出的路径
        filename: 'bundle.js', //输出的文件名 
    },
    plugins: [new HtmlWebpackPlugin({//使用html插件
        //配置打包的模板
template:'./public/index.html'
    })],
    mode:'production',//打包模式很精细
    module: { 
        rules: [ // loader的规则
          {
            test: /\.css$/, // 匹配所有的css文件
            // use数组里从右向左运行
            // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
            // 再用 style-loader 将样式, 把css插入到dom中
            use: [ "style-loader", "css-loader"]
          }
        ]
    }

}